<template>
	<view class="container" :style="viewColor">
		<view class="header" :style="{ 'background-image': `url(${domain}/static/images/plant-header.png)`}">
			<view class="user_wrapper acea-row">
				<image :src="circleInfo.avatar || '/static/images/f.png'" class="picture"></image>
				<view class="user_text">
					<view class="name acea-row">
						<text>{{circleInfo.title || ''}}</text>
						<!-- <image v-if="userInfo.member_icon" class="level_icon" :src="userInfo.member_icon" alt=""> -->
					</view>
					<view class="user_id">{{circleInfo.label_name.label_name || ''}}</view>
				</view>
				<view class="create_circle">
					<navigator hover-class="none" url="/pages/extends/circle_create/index" class="follow_btn focus" v-if="circleInfo.uid != userInfo.uid">
						<text class="iconfont icon-jiahao2"></text>建圈
					</navigator>
					<navigator hover-class="none" :url="'/pages/extends/circle_create/index?id='+circleInfo.id" class="follow_btn focus" v-else>
						编辑人脉圈
					</navigator>
				</view>
			</view>
			<view class="circle_info">
				<view class="circle_infos">
					<view class="circle_attention">{{circle_attention}}粉丝</view>
					<view class="circle_discuss">{{circle_discuss}}在讨论{{circleInfo.title}}</view>
					<view class="circle_discuss_list" v-if="circle_discuss">
						<image v-for="(item,index) in circle_discuss_list" :key='index' :src="item.author.avatar" />
					</view>
				</view>
				<view class="circle_qr" v-if="circleInfo.qr_code">
					<view class="circle_qr_img"><image :src="circleInfo.qr_code" /></view>
					<view class="circle_qr_tip">本圈微信群</view>
				</view>
			</view>
			<view class="plant_info acea-row">
				<view class="count_wrapper acea-row">
					<navigator :url="userInfo.is_self ? '/pages/plantGrass/plant_user_attention/index' : ''" class="item" hover-class="none">
						<text>{{userInfo.focus}}</text>关注
					</navigator>
					<navigator :url="userInfo.is_self ? '/pages/plantGrass/plant_user_fans/index' : ''" class="item" hover-class="none">
						<text>{{userInfo.fans}}</text>粉丝
					</navigator>
					<view class="item">
						<text>{{userInfo.start}}</text>获赞
					</view>
				</view>
				<view v-if="!userInfo.is_self" @click.stop="followAuthor">
					<button v-if="!userInfo.is_start" class="follow_btn focus">
						<text class="iconfont icon-jiahao2"></text>关注
					</button>
					<button v-else class="follow_btn focused">已关注</button>
				</view>
				<view v-else>
					<navigator hover-class="none" url="/pages/plantGrass/plant_release/index" class="follow_btn focus">
						<text class="iconfont icon-fabu"></text>发布
					</navigator>
				</view>
			</view>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	 
	import { userInfoApi, followAuthorApi, userArticleLst, starArticleLst } from '@/api/community.js';
	import {
		editCircle,
		getCircle,
	} from "@/api/circle";
	import { getUserInfo } from '@/api/user.js';
	import { mapGetters } from "vuex";
	import authorize from '@/components/Authorize';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			authorize
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				goods: [], // 商铺商品
				loadTitle: '加载更多',
				loading: false,
				loaded: false,
				isShowAuth: false, //是否隐藏授权
				isAuto: false, //没有授权的不会自动授权
				circleInfo: {},
				circle_attention: 0,
				circle_discuss: 0,
				circle_discuss_list: [],
				userInfo: {},
				where: {
					page: 1,
					limit: 30
				},
				tab: 0,
				id: ''
			}
		},
		created() {},
		computed: {
			...mapGetters(['isLogin','viewColor']),
		},
		watch: {},
		onLoad: function(options) {
			let that = this;
			that.id = options.id
			if (that.isLogin) {
				that.getCircleInfo(that.id);
				that.getUserInfo();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {},
		onReady() {},
		mounted: function() {},
		methods: {
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权
			authOpen: function() {
				let that = this;
				if (that.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				}
			},
			/*获取人脉圈信息*/
			getCircleInfo(id){
				let that = this;
				getCircle(id, {circle_type: 1}).then(res => {
					console.log(999, res);
					that.circleInfo = res.data.circle
					that.circle_attention = res.data.circle_attention
					that.circle_discuss = res.data.circle_discuss
					that.circle_discuss_list = res.data.circle_discuss_list
				});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			// 关注作者
			followAuthor: function() {
				if (this.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				} else {
					let status = this.userInfo.is_start ? false : true
					followAuthorApi(this.userInfo.uid,{status: status}).then(res => {
						if (res.status === 200) {
							this.userInfo.is_start = this.userInfo.is_start ? false : true
						}
						this.$util.Tips({
							title: res.message
						});
					});
				}
			},
			changeTab(tab){
				this.tab = tab
				this.where.page = 1
				this.loaded = this.loading = false
				this.goods = []
				let uid = this.userInfo.is_self ? this.uid : this.userInfo.uid
				this.getList(uid)
			}
		},
		onReachBottom() {
			let uid = this.userInfo.is_self ? this.uid : this.userInfo.uid
			this.getList(uid);
		},
		onPullDownRefresh(){},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		}
	}
</script>

<style lang="scss" scoped>
.container{
	background: #ffffff;
	min-height: 100vh;
}
.header{
	width: 750rpx;
	height: 400rpx;
	padding: 56rpx 30rpx 0;
	background-repeat: no-repeat;
	background-size: 100%;
	.user_wrapper{
		align-items: center;
		.create_circle {
			margin-left: auto;
		}
		.image,uni-image,image{
			width: 140rpx;
			height: 140rpx;
			// border-radius: 100%;
			border: 4rpx solid #ffffff;
		}
		.user_text{
			margin-left: 22rpx;
			color: #FFFFFF;
			.name{
				font-size: 34rpx;
				font-weight: bold;
				align-items: center;
			}
			.user_id{
				margin-top: 16rpx;
				font-size: 24rpx;
			}
			.level_icon{
				width: 34rpx;
				height: 32rpx;
				margin: 4rpx 0 0 6rpx;
				border: none;
			}
		}
	}
	.plant_info{
		margin-top: 60rpx;
		align-items: center;
		justify-content: space-between;
		.count_wrapper{
			color: #FFFFFF;
			font-size: 24rpx;
			.item{
				text-align: center;
				margin-right: 60rpx;
				&:last-child{
					margin-right: 0;
				}
				text{
					display: block;
					font-size: 30rpx;
					margin-top: 10rpx;
				}
			}
		}
	}
	.follow_btn{
		color: #201B17;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 146rpx;
		height: 62rpx;
		background-color: transparent;
		background-image: linear-gradient(270deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
		border-radius: 33rpx;
		.iconfont{
			font-size: 16rpx;
			margin-right: 12rpx;
		}
		.icon-fabu{
			font-size: 24rpx;
		}
		&.focused{
			background: transparent;
			color: #FFFFFF;
			border: 1px solid #FFFFFF;
		}
	}
}
.circle_info {
	display: flex;
	flex-wrap: nowrap;
	padding-left: 140rpx;
	.circle_infos {
		flex: 1;
		.circle_attention {
			color: #1A1512;
			font-size: 40rpx;
			font-weight: 550;
		}
		.circle_discuss {
			color: #1A1512;
			font-size: 35rpx;
		}
		.circle_discuss_list {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			image {
				width: 50rpx;
				height: 50rpx;
				border-radius: 100%;
				margin-left: -15rpx;
			}
			image:first-child {
				margin-left: 0;
			}
		}
	}
	.circle_qr {
		width: 140rpx;
		color: #fff;
		.circle_qr_img {
			width: 140rpx;
			image {
				width: 140rpx;
				height: 140rpx;
			}
		}
	}
}
</style>
